<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩分析 - 在线考试系统</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <script src="/js/echarts.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --light: #f8f9fa;
            --dark: #343a40;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .page-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .page-subtitle {
            color: #6c757d;
            margin-bottom: 0;
        }

        /* 统计卡片 */
        .stats-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            height: 100%;
            border-left: 4px solid var(--primary);
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .stats-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1rem;
        }

        .stats-number {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        /* 图表卡片 */
        .chart-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            overflow: hidden;
        }

        .chart-header {
            background: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chart-header i {
            margin-right: 10px;
            font-size: 1.25rem;
            color: var(--primary);
        }

        .chart-body {
            padding: 1.5rem;
        }

        .chart-container {
            height: 400px;
            width: 100%;
        }

        /* 最近考试记录 */
        .recent-exams {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
        }

        .exam-item {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: var(--transition);
        }

        .exam-item:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .exam-item:last-child {
            border-bottom: none;
        }

        .exam-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .exam-course {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .exam-score {
            font-weight: 700;
            font-size: 1.1rem;
        }

        .score-excellent { color: var(--success); }
        .score-good { color: var(--info); }
        .score-average { color: var(--warning); }
        .score-poor { color: var(--danger); }

        /* 按钮样式 */
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            transition: var(--transition);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.4);
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .spinner-border {
            color: var(--primary);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .stats-number {
                font-size: 1.5rem;
            }
            
            .chart-container {
                height: 300px;
            }
        }

        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }
        .student .footer {
            background: linear-gradient(135deg, var(--primary), #3a0ca3);
        }
        .copyright {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
        }
        /* AI对话框优化 */
        .ai-chat-container {
            padding: 1.5rem 0 0.5rem 0;
            background-color: transparent;
            width: 100%;
        }
        .ai-chat-card {
            width: 100%;
            max-width: none;
            margin: 0 auto 2rem auto;
            box-shadow: var(--card-shadow);
            border-radius: 14px;
            border-top: 3px solid var(--primary);
            background: #fff;
        }
        .ai-chat-header {
            background: linear-gradient(135deg, var(--primary), #3a0ca3);
            color: white;
            padding: 1rem 1.5rem;
            font-weight: 600;
            border-radius: 14px 14px 0 0;
        }
        .ai-chat-body {
            padding: 1.25rem;
            height: 220px;
            overflow-y: auto;
            background-color: #f8f9fa;
        }
        .ai-chat-footer {
            padding: 1rem;
            background-color: #fff;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 0 0 14px 14px;
        }
        .ai-message {
            margin-bottom: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .ai-message.user {
            background-color: #e6f7ff;
            border-left: 3px solid var(--info);
        }
        .ai-message.assistant {
            background-color: #f0f7ff;
            border-left: 3px solid var(--primary);
        }
        .ai-message .badge {
            font-weight: 500;
            margin-right: 0.5rem;
        }
        @media (max-width: 1200px) {
            .ai-chat-card { max-width: 100%; }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="/student/home">
            <i class="fas fa-graduation-cap"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/exam/list"><i class="fas fa-pen-alt"></i> 考试信息</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/score/analysis"><i class="fas fa-chart-line"></i> 成绩分析</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/student/resources"><i class="fas fa-book-open"></i> 学习资源</a>
                </li>
            </ul>

            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/student/profile/manage">
                        <i class="fas fa-user-circle"></i> 个人信息
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/logout">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 智能学习建议对话框（导航栏下方，卡片宽度与主内容一致） -->
<div class="ai-chat-container">
    <div class="container">
        <div class="ai-chat-card">
            <div class="ai-chat-header">
                <i class="fas fa-robot"></i> 智能学习助手
            </div>
            <div class="ai-chat-body" id="ai-chat-body">
                <div class="ai-message assistant">
                    <span class="badge bg-primary">AI助手</span> 
                    你好！我是你的学习助手。我可以根据你的成绩数据提供个性化的学习建议。试试问我："我的薄弱科目是什么？" 或 "如何提高数学成绩？"
                </div>
            </div>
            <div class="ai-chat-footer d-flex">
                <input type="text" id="ai-chat-input" class="form-control me-2" placeholder="请输入你的问题或点击获取学习建议...">
                <button class="btn btn-primary" onclick="sendAIMessage()">
                    <i class="fas fa-paper-plane"></i> 发送
                </button>
                <button class="btn btn-success ms-2" onclick="getAISuggestion()">
                    <i class="fas fa-lightbulb"></i> 获取建议
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">成绩分析中心</h1>
            <p class="page-subtitle">全面了解您的学习表现和成绩趋势</p>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--success), #45a049);">
                        <i class="fas fa-clipboard-check"></i>
                    </div>
                    <div class="stats-number" id="totalExams">0</div>
                    <div class="stats-label">总考试次数</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--info), #1976d2);">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stats-number" id="averageScore">0</div>
                    <div class="stats-label">平均成绩</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--warning), #f57c00);">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="stats-number" id="highestScore">0</div>
                    <div class="stats-label">最高成绩</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="stats-card">
                    <div class="stats-icon" style="background: linear-gradient(135deg, var(--primary), var(--secondary));">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="stats-number" id="passRate">0%</div>
                    <div class="stats-label">及格率</div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row">
            <!-- 成绩趋势图 -->
            <div class="col-lg-8 mb-4">
                <div class="chart-card">
                    <div class="chart-header">
                        <div>
                            <i class="fas fa-chart-line"></i> 成绩趋势分析
                        </div>
                        <button class="btn btn-sm btn-outline-primary" onclick="refreshTrendChart()">
                            <i class="fas fa-sync-alt"></i> 刷新
                        </button>
                    </div>
                    <div class="chart-body">
                        <div id="trendChart" class="chart-container">
                            <div class="loading">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 成绩分布图 -->
            <div class="col-lg-4 mb-4">
                <div class="chart-card">
                    <div class="chart-header">
                        <div>
                            <i class="fas fa-chart-pie"></i> 成绩分布
                        </div>
                    </div>
                    <div class="chart-body">
                        <div id="distributionChart" class="chart-container">
                            <div class="loading">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程成绩分析 -->
        <div class="row">
            <div class="col-12 mb-4">
                <div class="chart-card">
                    <div class="chart-header">
                        <div>
                            <i class="fas fa-book"></i> 各课程成绩对比
                        </div>
                        <a href="/student/score/course" class="btn btn-sm btn-primary">
                            <i class="fas fa-external-link-alt"></i> 详细分析
                        </a>
                    </div>
                    <div class="chart-body">
                        <div id="courseChart" class="chart-container">
                            <div class="loading">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近考试记录 -->
        <div class="row">
            <div class="col-12">
                <div class="recent-exams">
                    <div class="chart-header">
                        <div>
                            <i class="fas fa-history"></i> 最近考试记录
                        </div>
                        <button class="btn btn-sm btn-outline-primary" onclick="loadRecentRecords()">
                            <i class="fas fa-sync-alt"></i> 刷新
                        </button>
                    </div>
                    <div id="recentExamsList">
                        <div class="loading">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.min.js"></script>

<script>
    // 全局变量
    let trendChart, distributionChart, courseChart;
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        loadStatistics();
        initCharts();
        loadRecentRecords();
    });
    
    // 加载统计数据
    function loadStatistics() {
        fetch('/student/score/api/statistics')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const stats = data.data;
                    document.getElementById('totalExams').textContent = stats.totalExams || 0;
                    document.getElementById('averageScore').textContent = (stats.averageScore || 0).toFixed(1);
                    document.getElementById('highestScore').textContent = stats.highestScore || 0;
                    document.getElementById('passRate').textContent = (stats.passRate || 0).toFixed(1) + '%';
                }
            })
            .catch(error => {
                console.error('加载统计数据失败:', error);
            });
    }
    
    // 初始化图表
    function initCharts() {
        // 初始化趋势图
        trendChart = echarts.init(document.getElementById('trendChart'));
        loadTrendChart();
        
        // 初始化分布图
        distributionChart = echarts.init(document.getElementById('distributionChart'));
        loadDistributionChart();
        
        // 初始化课程图
        courseChart = echarts.init(document.getElementById('courseChart'));
        loadCourseChart();
        
        // 响应式调整
        window.addEventListener('resize', function() {
            trendChart.resize();
            distributionChart.resize();
            courseChart.resize();
        });
    }
    
    // 加载趋势图
    function loadTrendChart() {
        fetch('/student/score/api/trend')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const trendData = data.data;
                    const option = {
                        title: {
                            text: '成绩趋势变化',
                            left: 'center',
                            textStyle: {
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                const data = params[0];
                                return `${data.name}<br/>${data.seriesName}: ${data.value}分`;
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: trendData.examDates || [],
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '成绩',
                            min: 0,
                            max: 100
                        },
                        series: [{
                            name: '成绩',
                            type: 'line',
                            data: trendData.scores || [],
                            smooth: true,
                            lineStyle: {
                                color: '#4361ee',
                                width: 3
                            },
                            itemStyle: {
                                color: '#4361ee'
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0, y: 0, x2: 0, y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(67, 97, 238, 0.3)'
                                    }, {
                                        offset: 1, color: 'rgba(67, 97, 238, 0.1)'
                                    }]
                                }
                            }
                        }]
                    };
                    trendChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载趋势图失败:', error);
            });
    }
    
    // 加载分布图
    function loadDistributionChart() {
        fetch('/student/score/api/distribution')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const distributionData = data.data;
                    const option = {
                        title: {
                            text: '成绩分布',
                            left: 'center',
                            textStyle: {
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        series: [{
                            name: '成绩分布',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            center: ['50%', '60%'],
                            data: distributionData.ranges.map((range, index) => ({
                                name: range,
                                value: distributionData.counts[index] || 0
                            })),
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    distributionChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载分布图失败:', error);
            });
    }
    
    // 加载课程图
    function loadCourseChart() {
        fetch('/student/score/api/course-analysis')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const courseData = data.data;
                    const option = {
                        title: {
                            text: '各课程平均成绩',
                            left: 'center',
                            textStyle: {
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: courseData.map(item => item.courseName),
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: '平均成绩',
                            min: 0,
                            max: 100
                        },
                        series: [{
                            name: '平均成绩',
                            type: 'bar',
                            data: courseData.map(item => item.averageScore),
                            itemStyle: {
                                color: function(params) {
                                    const score = params.value;
                                    if (score >= 90) return '#4caf50';
                                    if (score >= 80) return '#2196f3';
                                    if (score >= 70) return '#ff9800';
                                    return '#f44336';
                                }
                            }
                        }]
                    };
                    courseChart.setOption(option);
                }
            })
            .catch(error => {
                console.error('加载课程图失败:', error);
            });
    }
    
    // 加载最近考试记录
    function loadRecentRecords() {
        const container = document.getElementById('recentExamsList');
        container.innerHTML = '<div class="loading"><div class="spinner-border" role="status"><span class="visually-hidden">加载中...</span></div></div>';
        
        fetch('/student/score/api/recent-records?limit=5')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const records = data.data;
                    if (records.length === 0) {
                        container.innerHTML = '<div class="p-4 text-center text-muted">暂无考试记录</div>';
                        return;
                    }
                    
                    let html = '';
                    records.forEach(record => {
                        const score = record.score || 0;
                        const totalScore = record.total_score || 100;
                        const percentage = (score / totalScore * 100).toFixed(1);
                        
                        let scoreClass = 'score-poor';
                        if (percentage >= 90) scoreClass = 'score-excellent';
                        else if (percentage >= 80) scoreClass = 'score-good';
                        else if (percentage >= 70) scoreClass = 'score-average';
                        
                        html += `
                            <div class="exam-item">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="exam-name">${record.exam_name}</div>
                                        <div class="exam-course">${record.course_name}</div>
                                        <small class="text-muted">提交时间: ${new Date(record.submit_time).toLocaleString()}</small>
                                    </div>
                                    <div class="text-end">
                                        <div class="exam-score ${scoreClass}">${score}/${totalScore}</div>
                                        <small class="text-muted">${percentage}%</small>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    
                    container.innerHTML = html;
                } else {
                    container.innerHTML = '<div class="p-4 text-center text-danger">加载失败</div>';
                }
            })
            .catch(error => {
                console.error('加载最近记录失败:', error);
                container.innerHTML = '<div class="p-4 text-center text-danger">加载失败</div>';
            });
    }
    
    // 刷新趋势图
    function refreshTrendChart() {
        loadTrendChart();
    }
</script>
<script>
function appendAIMessage(content, sender) {
    const body = document.getElementById('ai-chat-body');
    const msg = document.createElement('div');
    msg.className = sender === 'user' ? 'text-end mb-2' : 'text-start mb-2';
    msg.innerHTML = `<span class="badge bg-${sender === 'user' ? 'primary' : 'secondary'}">${sender === 'user' ? '我' : 'AI'}</span> <span>${content}</span>`;
    body.appendChild(msg);
    body.scrollTop = body.scrollHeight;
    return msg.querySelector('span:last-child'); // 返回内容span用于流式追加
}

function sendAIMessage() {
    const input = document.getElementById('ai-chat-input');
    const question = input.value.trim();
    if (!question) return;
    appendAIMessage(question, 'user');
    input.value = '';

    // 新建AI消息气泡
    const aiContentSpan = appendAIMessage('<span class="spinner-border spinner-border-sm"></span> AI正在思考...', 'ai');

    // 流式请求
    fetch('/student/score/api/ai-chat-stream', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({question})
    }).then(response => {
        const reader = response.body.getReader();
        let content = '';
        function read() {
            reader.read().then(({done, value}) => {
                if (done) {
                    aiContentSpan.innerHTML = content.trim();
                    return;
                }
                let chunk = new TextDecoder().decode(value);
                // 彻底去除所有data:和多余空格
                chunk = chunk.replace(/(^|\n)\s*data:/g, '').replace(/\s+/g, '');
                content += chunk;
                aiContentSpan.innerHTML = content;
                read();
            });
        }
        read();
    }).catch(() => {
        aiContentSpan.innerHTML = 'AI服务暂时不可用';
    });
}

function getAISuggestion() {
    appendAIMessage('请根据我的成绩数据给出学习建议', 'user');
    // 新建AI消息气泡
    const aiContentSpan = appendAIMessage('<span class="spinner-border spinner-border-sm"></span> AI正在思考...', 'ai');
    // 流式请求
    fetch('/student/score/api/ai-chat-stream', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({question: '请根据我的成绩数据给出学习建议'})
    }).then(response => {
        const reader = response.body.getReader();
        let content = '';
        function read() {
            reader.read().then(({done, value}) => {
                if (done) {
                    aiContentSpan.innerHTML = content.trim();
                    return;
                }
                let chunk = new TextDecoder().decode(value);
                chunk = chunk.replace(/(^|\n)\s*data:/g, '').replace(/\s+/g, '');
                content += chunk;
                aiContentSpan.innerHTML = content;
                read();
            });
        }
        read();
    }).catch(() => {
        aiContentSpan.innerHTML = 'AI服务暂时不可用';
    });
}
</script>
<!-- 页脚（与主页一致） -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>
</body>
</html> 